import React from 'react';
import router from 'umi/router';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Steps, Radio, Button } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { urlParse } from '@/utils/utils';

const { Step } = Steps;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
class SelectSteps extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      billId: '',
      splitType: '1',
    };
  }

  componentDidMount() {
    const { location } = this.props;
    const { billId } = this.state;
    const billIds = urlParse(location.search).billId || billId;
    this.setState({ billId: billIds });
  }

  // 选择单选框
  changesRadio = (e, target) => {
    this.setState({ [target]: e.target.value });
  };

  render() {
    const { splitType, billId } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    return (
      <PageHeaderWrapper>
        <Card>
          <Steps current={0}>
            <Step title="选择拆分类型" />
            <Step title="填写拆分信息" />
            <Step title="完成" />
          </Steps>
          <Form hideRequiredMark style={{ marginTop: 100 }}>
            <FormItem {...formItemLayout} label="&nbsp;" colon={false}>
              <RadioGroup
                onChange={e => this.changesRadio(e, 'splitType')}
                defaultValue={splitType}
              >
                <Radio key="1" value="1">
                  按员工拆分
                </Radio>
              </RadioGroup>
            </FormItem>
            <br />
          </Form>
          <div style={{ marginTop: 100, marginBottom: 30, textAlign: 'center' }}>
            <Button style={{ marginRight: 30 }} onClick={() => window.history.back()}>
              返回
            </Button>
            <Button
              type="primary"
              onClick={() =>
                splitType === '1'
                  ? router.push(
                      `/chargmanage/chargebillns/splitbyemp?splitType=${splitType}&billId=${billId}`
                    )
                  : router.push(
                      `/chargmanage/chargebillns/splitbypro?splitType=${splitType}&billId=${billId}`
                    )
              }
            >
              下一步
            </Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default SelectSteps;
